<script lang="ts" setup>
import { defineProps, ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { timeAbbreviation } from '@/utils/time'
import { Api } from '@/apis/index'
import { useCounterStore } from '@/stores/counter'

import type { DefaultDetailData } from '@/TypingMore/VideoTyping'
import type { RecommendSeason } from '@/TypingMore/SeasonTyping'

const props = defineProps<{
    videoData: DefaultDetailData
    sid: number
}>()

const store = useCounterStore()

const { browseRecords } = store

const router = useRouter()

const recommendSeason = ref<RecommendSeason[]>([])

const getBvid = async (recommendSeasonItem: RecommendSeason) => {
    console.log(recommendSeasonItem)
    await Api.getSectionData(recommendSeasonItem.season_id).then(async ({ data: epi }) => {

        console.log(epi.result.main_section.episodes[0])
        let ep = epi.result.main_section.episodes[0]
        // Api.getSectionIdData(ep.share_url.split('ep')[1]).then(({data}) => {

        // })
        await Api.getBvid(ep.aid, ep.cid, ep.share_url.split('ep')[1], recommendSeasonItem.season_id).then(({ data }) => {
            console.log('hhhh', data)
            let obj = {
                bvid: data.data.bvid,
                aid: epi.result.main_section.episodes[0].aid,
                length:  0,
                title: recommendSeasonItem.title,
                play:recommendSeasonItem.stat.follow,
                video_review: recommendSeasonItem.stat.view,
                pic: recommendSeasonItem.url
            }
            browseRecords(obj)
            router.replace(`/video/${data.data.bvid}`)
        })

    })

}

const fRecommendData = async () => {
    let { data } = await Api.getRecommendData(props.sid)

    recommendSeason.value = data.data.season

    console.log('相关建议(data):', data)
}

watch(() => props.sid, () => {
    fRecommendData()
})

onMounted(() => {

})
</script>


<template>
    <div class=" px-3" v-if="videoData?.data?.View.redirect_url">
        <div class=" flex justify-between px-1 py-2">
            <div class=" font-bold">更多推荐</div>
        </div>
        <div class="">
            <div v-for="r in recommendSeason" :key="r.url" class=" flex mb-4" @click="getBvid(r)">
                <img :src="r.new_ep.cover + '@480w_270h_1c'" alt="" class=" w-32 rounded-md mr-3">
                <div class=" flex flex-col justify-between">
                    <p>{{ r.title }}</p>
                    <p class=" text-xs text-gray-400"><span>{{ timeAbbreviation(r.stat.view) + '观看' }}</span><span>{{
                            timeAbbreviation(r.stat.follow) + '人追番'
                    }}</span></p>
                </div>
            </div>
        </div>
    </div>
</template>